import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Button, Divider, Table, Card, Modal, Form, DatePicker } from 'antd';
import moment from 'moment';

const FormItem = Form.Item;
const confirm = Modal.confirm;

@connect(({ template_message, loading }) => ({
  template_message,
  loading: loading.models.template_message,
}))
@Form.create()
export default class Schedule extends PureComponent {
  state = {
    scheduleId: '',
    updateModalVisible: false,
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'template_message/fetchSchedules',
    });
  }

  // 显示删除确认框
  showDeleteConfirm(id) {
    confirm({
      title: '确认删除此任务?',
      okText: '确认',
      cancelText: '取消',
      okType: 'danger',
      onOk: () => this.delSchedule(id),
    });
  }
  // 删除任务
  delSchedule = id => {
    this.props.dispatch({
      type: 'template_message/deleteSchedule',
      payload: id,
    });
  };

  // 返回上个页面
  handleGoBack = () => {
    this.props.history.goBack();
  };

  render() {
    const { template_message: { schedules }, loading } = this.props;

    const columns = [
      {
        title: '任务ID',
        dataIndex: 'job_id',
        key: 'job_id',
      },
      {
        title: '公众号ID',
        dataIndex: 'acc_id',
        key: 'acc_id',
      },
      {
        title: '发送时间',
        dataIndex: 'delay',
        key: 'delay',
        render: text => moment.unix(text).format('MM-DD HH:mm'),
      },
      {
        title: '任务状态',
        dataIndex: 'completed',
        key: 'completed',
        render: text => {
          if (text == 0) return '等待中';
          else return '已执行';
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        render: (text, record) => (
          <Button
            type="primary"
            disabled={record.completed == 1}
            onClick={() => this.showDeleteConfirm(record.job_id)}
          >
            删除任务
          </Button>
        ),
      },
    ];

    return (
      <div>
        <Button onClick={this.handleGoBack} type="primary" style={{ marginBottom: 10 }}>
          返回
        </Button>
        <Card>
          <Table
            rowKey="scheduleId"
            loading={loading}
            dataSource={schedules}
            bordered
            columns={columns}
          />
        </Card>
      </div>
    );
  }
}
